<template>
  <div class="data-get">
    <div class="bread-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="iconfont icon-shuju"></i> 测试数据集</el-breadcrumb-item>
        <el-breadcrumb-item>{{typeZh[this.$route.query.type]}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="data-box-wrap">
      <el-tabs
        v-model="activeName"
        v-loading="tabsVis"
      >
        <el-tab-pane
          label="记录"
          name="first"
        >
          <div class="data-content">
            <el-table
              :data="tableData"
              style="width: 100%"
              :show-header="true"
              v-if="type==='portrait'"
              key="portrait"
            >
              <el-table-column
                prop="action"
                label="行为"
              >
              <template slot-scope="scope">
                {{scope.row.action | toZh}}
              </template>
              </el-table-column>
              <el-table-column
                prop="all_count"
                label="总数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="average_count"
                label="平均数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="distinct_count"
                label="行为学生数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="180"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goTable(scope.row.action)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="tableData2"
              style="width: 100%"
              :show-header="true"
              v-else-if="type==='sample'"
              key="sample"
            >
              <el-table-column
                prop="action"
                label="行为"
              >
              </el-table-column>
              <el-table-column
                prop="all_count"
                label="总数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="average_count"
                label="平均数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="distinct_count"
                label="distinct_count"
                width="180"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="180"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goTable(scope.row.action)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>


        </el-tab-pane>
        <el-tab-pane
          label="学生数据"
          name="second"
        >
          <div class="pic-content">
            <el-collapse
              v-model="activeName2"
              accordion
            >
              <template v-for="(item,index) in picData">
                <el-collapse-item
                  :name="index"
                  :key="index"
                >
                  <template slot="title">
                    <h4>{{item.title}}</h4>
                  </template>
                  <div><img
                      :src="item.image"
                      alt=""
                    ></div>
                  <div style="padding:10px 60px">{{item.text}}</div>
                </el-collapse-item>
              </template>

            </el-collapse>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'DataGet',
    data() {
      return {
        wrapHeight: '',
        name: '',
        ch_name: '',
        type: 'portrait',
        version: "",
        activeName: "first",
        activeName2: [0,1,2,3,4,5],
        tabsVis: true,
        typeZh: {
          portrait: 'XAPI803金融学',
          sample: '数据采样'
        },
        tableData: [{
            name: "总记录数:",
            value: ""
          },
          {
            name: "accessed表记录数:",
            value: "/portrait/accessed/"
          },
          {
            name: "completed基本表:",
            value: "/portrait/completed/"
          },
          {
            name: "downloaded成绩表:",
            value: "/portrait/downloaded/"
          },
          {
            name: "registered记录表:",
            value: "/portrait/registered/"
          },
          {
            name: "registered记录表:",
            value: "/portrait/registered/"
          }, {
            name: "scored记录表:",
            value: "/portrait/scored/"
          },
          {
            name: "registered记录表:",
            value: "/portrait/registered/"
          },
          {
            name: "studied记录表:",
            value: "/portrait/studied/"
          },
          {
            name: "registered记录表:",
            value: "/portrait/registered/"
          },
          {
            name: "submitted记录表:",
            value: "/portrait/submitted/"
          },
          {
            name: "watched记录表:",
            value: "/portrait/watched/"
          },
          {
            name: "总记录数:",
            value: ""
          }
        ],
        tableData2: [],
        picData: [{
            title: '学生分数分布',
            image: require('../../assets/pic1.png'),
            text: '根据分布将成绩分为三个阶段。90分及以上为好，70分及以下为差，其他为正常'
          },
          {
            title: '年龄分布',
            image: require('../../assets/pic2.png'),
            text: '45岁及以上为大，28分及以下为小，其他为中'
          },
          {
            title: '性别对成绩分布的影响',
            image: require('../../assets/pic3.png'),
            text: '性别对成绩的影响很小'
          },
          {
            title: '年级对成绩分布的影响',
            image: require('../../assets/pic4.png'),
            text: '年级对成绩有一定影响，年级大精力分散，不容易取得好成绩'
          },
          {
            title: '网站访问最成绩分布的影响',
            image: require('../../assets/pic5.png'),
            text: '不常去网站访问学习资源的学生，成绩普遍不好'
          },
          {
            title: '在线学习时长对分数分布的影响',
            image: require('../../assets/pic6.png'),
            text: '在线学习对学习成绩的改善有促进作用'
          },
        ]
      }
    },
    filters:{
      toZh(value){
        const zh = {
          registered: '登陆',
          scored: '分数',
          completed: '完成',
          studied: '学习',
          accessed: '访问',
          downloaded: '下载',
          watched: '监视',
          posted: '发',
          submitted: '提交'
        }
        return `${value}(${zh[value]})`
      }
    },
    watch: {
      '$route'(to, from) {
        // data数据操作
        this.type = this.$route.query.type
        this.getData()
      }
    },
    created() {
      // this.crawlerGet()
      this.type = this.$store.state.type
      this.getData()
    },
    methods: {
      getData() {
        this.tabsVis = true
        if (this.type === 'portrait') {
          this.$http.get(`${this.type}/action_total/`).then(response => {
            this.tableData = response.data.results
            this.tabsVis = false
          })
        } else if (this.type === 'sample') {
          this.$http.get(`${this.type}/table_total/`).then(response => {
            this.tableData2 = response.data.results
            this.tabsVis = false
          })
        }
      },
      goTable(action,name) {
        this.$router.push({
          path: "/home/table",
          query: {
            type: this.type,
            action: action,
          }
        })
      },
      getTest() {

      }
    }
  }

</script>

<style lang="scss">
  .data-get {
    $tcolor: #a7a7a7;
    $bcolor: #f9f9f9;
    $acolor: #3b89de;
    color: $tcolor;
    height: calc(100%);

    .crawler-nav {
      text-align: right;

      .node-item {
        display: inline-block;
        padding: 10px 10px 10px 0;

        label {
          font-size: 12px;
          color: #353535
        }

        span {
          font-size: 12px;
          color: #3d8ade
        }
      }
    }

    .data-box-wrap {
      height: calc(100% - 40px);
      padding: 20px;
      font-size: 16px;
      overflow-y: scroll;

      .data-item {
        >span {
          padding-right: 50px;
          line-height: 30px;
        }
      }

      .pic-content {
        overflow: hidden;

        .pic-item {
          border: 1px solid red;
          width: 200px;
          height: 200px;
          float: left;
          margin-right: 20px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

  }

</style>
